<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
    <title>Android Design - 操作栏</title>
	<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:regular,medium,thin,italic,mediumitalic" />
	<link rel="stylesheet" type="text/css" href="../css/style.css" />
	<link rel="stylesheet" type="text/css" href="../css/folding.css" />
	<style type="text/css">
	#content .videoInstruction {
		padding-left: 20px;
		background: url('ico_movie_inline.png') left center no-repeat;
	}
	</style>
	<script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="../js/jquery.common.min.js"></script>
	<script type="text/javascript" src="../js/jquery.folding.min.js"></script>
	<script type="text/javascript" src="../js/adchs.js"></script>
</head>
<body>
	<div id="pageWrapper">
		<div id="header">
			<a href="../index.html">Android Design&nbsp;<span class="headerChs">Android 设计指南非官方简体中文版</span></a>
		</div>
		<div id="navWrapper">
			<div class="divListwHeader foldingList">
				<div class="trigger"><a href="../index.html">开始</a></div>
				<ul class="foldingContainer">
					<li><a href="../get-started/create-vistion.html">创新的视觉效果</a></li>
					<li><a href="../get-started/principles.html">设计原则</a></li>
					<li><a href="../get-started/ui-overview.html">UI 概览</a></li>
				</ul>
			</div>
			<div class="divListwHeader foldingList">
				<div class="trigger"><a href="../style/index.html">风格</a></div>
				<ul class="foldingContainer">
					<li><a href="../style/devices-displays.html">设备和显示</a></li>
					<li><a href="../style/themes.html">主题</a></li>
					<li><a href="../style/touch-feedback.html">触摸反馈</a></li>
					<li><a href="../style/metrics-grids.html">度量单位和网格</a></li>
					<li><a href="../style/typography.html">字体</a></li>
					<li><a href="../style/color.html">颜色</a></li>
					<li><a href="../style/iconography.html">图标</a></li>
					<li><a href="../style/writing.html">写作风格</a></li>
				</ul>
			</div>
			<div class="divListwHeader foldingList initShow">
				<div class="trigger"><a href="index.html">模式</a></div>
				<ul class="foldingContainer">
					<li><a href="new.html">Android 新特性</a></li>
					<li><a href="gestures.html">手势</a></li>
					<li><a href="app-structure.html">应用结构</a></li>
					<li><a href="navigation.html">导航</a></li>
					<li><a class="highlight" href="actionbar.html">操作栏</a></li>
					<li><a href="multi-pane-layouts.html">多视图布局</a></li>
					<li><a href="swipe-views.html">滑动视图</a></li>
					<li><a href="selection.html">选择</a></li>
					<li><a href="confirming-acknowledging.html">确认和提示</a></li>
					<li><a href="notifications.html">通知</a></li>
					<li><a href="widgets.html">小部件</a></li>
					<li><a href="settings.html">设置</a></li>
					<li><a href="help.html">帮助</a></li>
					<li><a href="compatibility.html">兼容性</a></li>
					<li><a href="accessibility.html">可用性</a></li>
					<li><a href="pure-android.html">纯粹的 Android</a></li>
				</ul>
			</div>
			<div class="divListwHeader foldingList">
				<div class="trigger"><a href="../building-blocks/index.html">控件</a></div>
				<ul class="foldingContainer">
					<li><a href="../building-blocks/tabs.html">标签选项卡</a></li>
					<li><a href="../building-blocks/lists.html">列表</a></li>
					<li><a href="../building-blocks/grid-lists.html">网格列表</a></li>
					<li><a href="../building-blocks/scrolling.html">滚动容器</a></li>
					<li><a href="../building-blocks/spinners.html">下拉菜单 (Spinners)</a></li>
					<li><a href="../building-blocks/buttons.html">按钮</a></li>
					<li><a href="../building-blocks/text-fields.html">文本框</a></li>
					<li><a href="../building-blocks/seek-bars.html">滑块</a></li>
					<li><a href="../building-blocks/progress.html">进度条和活动</a></li>
					<li><a href="../building-blocks/switches.html">开关</a></li>
					<li><a href="../building-blocks/dialogs.html">对话框</a></li>
					<li><a href="../building-blocks/pickers.html">选择器</a></li>
				</ul>
			</div>
			<br class="clear" />
		</div>
		<div id="content">
			<div class="contentNav topNav">
				<div class="contentHeaderWraper">
					<h2>操作栏&nbsp;<a class="originalLink" href="http://developer.android.com/design/patterns/actionbar.html" target="_blank">Original Version</a></h2>
				</div>
				<div class="buttonWrapper">
					<a class="buttonPrev" href="navigation.html">上一页</a><a class="buttonNext" href="multi-pane-layouts.html">下一页</a>
				</div>
			</div>
			<div id="mainContent">
				<img class="nomarginRight" src="action_bar_pattern_overview.png" />
				<p>“操作栏”对于 Android 应用来说是最重要的设计元素。它通常在应用运行的所有时间都呆在屏幕顶部。</p>
				<h4>操作栏的主要目的是:</h4>
				<ul class="circleList">
					<li>突出重要的操作 (例如“新建”和“搜索”) 并且可以方便的使用。</li>
					<li>在应用内提供统一的导航和视图切换体验。</li>
					<li>将较少使用的功能收集到其它操作菜单中，减少界面上的杂乱布局。</li>
					<li>为您的应用提供一个展示其特点的空间。</li>
				</ul>
				<p>如果您是编写 Android 应用的新手，请注意操作栏是需要实现的最重要的设计元素。根据下面的指导设计您的应用，使其和 Android 核心应用达到统一的界面体验。</p>
				<div class="contentHeaderWraper">
					<h2>基本布局</h2>
				</div>
				<p>对于大多数应用，操作栏可以分割为 4 个不同的功能区域。</p>
				<img class="nomarginLR" src="action_bar_basics.png" />
				<div>
					<div class="column col7">
						<ul>
							<li>
								<h4>1. 应用图标</h4>
								<p>应用图标是您应用的标志。在应用图标位置摆放您自己的 logo。注意: 如果当时应用不再顶层界面，那么在图标左边放置一个向左的箭头，表示“向上”按钮，使用户可以回到上一级界面。“向上”按钮的更多细节，请查看 <a href="navigation.html">导航</a> 一节。</p>
								<img class="nomarginLR" src="action_bar_pattern_up_app_icon.png" />
								<p class="caption">应用图标以及有和没有“向上”按钮的状态。</p>
							</li>
						</ul>
					</div>
					<div class="column col6 nomarginRight">
						<ul>
							<li>
								<h4>2. 视图控制</h4>
								<p>如果您的应用通过多个不同的视图显示数据，这个区域将允许用户切换视图。可以使用下拉菜单或者标签控件来实现。</p>
								<p>如果您的应用没有多个视图，您可以在这里显示不可操作的内容，例如标题或者品牌信息。</p>
							</li>
							<li>
								<h4>3. 操作按钮</h4>
								<p>显示您应用中最重的操作。如果图标放不下了，就自动移入“其它操作”菜单。</p>
							</li>
							<li>
								<h4>4. 其它操作</h4>
								<p>将较少被用到的操作放在这个菜单里。</p>
							</li>
						</ul>
					</div>
					<div class="clear"></div>
				</div>
				<div class="contentHeaderWraper">
					<h2>适应旋转和不同的屏幕尺寸</h2>
				</div>
				<p>UI 设计最重要的一件事就是让其自动适应旋转和不同的屏幕尺寸。</p>
				<p>您可以使用“副操作栏”来做到。您可以在“副操作栏”中放置一些操作，“副操作栏”可以根据需要放在操作栏下面或者屏幕底部。</p>
				<img class="nomarginLR" src="action_bar_pattern_rotation.png" />
				<p class="caption">当设备竖直放置时，副操作栏出现在屏幕底部。</p>
				<div class="contentHeaderWraper">
					<h2>副操作栏的布局</h2>
				</div>
				<div>
					<div class="column col8">
						<p>当您要把操作放在多个操作栏中的时候，一般有三个选择:</p>
						<ul>
							<li><span class="highlight">1. 操作栏</span></li>
							<li><span class="highlight">2. 顶部栏</span></li>
							<li><span class="highlight">3. 底部栏</span></li>
						</ul>
						<p>如果用户可以导航到应用的上一级屏幕，那么操作栏中至少要放置“向上”按钮。</p>
						<p>为了让用户可以快速切换屏幕和视图，在顶部栏中放置标签或者下拉菜单 (spinner)。</p>
						<p>当没有足够的空间显示操作图标时，使用底部栏。</p>
					</div>
					<div class="column col3 nomarginRight">
						<img class="nomarginLR" src="action_bar_pattern_considerations.png" />
					</div>
					<div class="clear"></div>
				</div>
				<div class="contentHeaderWraper">
					<h2>上下文操作栏</h2>
				</div>
				<p>“上下文操作栏” (contextual action bar，CAB) 是一个浮于操作栏上的临时操作栏，用来放置一些特定的子任务。“上下文操作栏”一般在项目选择和文字选择时出现。</p>
				<img class="nomarginLR" src="action_bar_cab.png" />
				<p class="caption">浏览器和 Gmail 应用中的上下文操作栏</p>
				<p>长按可选择的内容，进入选择模式，显示上下文操作栏。</p>
				<p><span class="highlight">此时用户可以</span>:</p>
				<ul class="circleList">
					<li>通过触摸选择项目。</li>
					<li>在上下文操作栏中选择操作，并应用于所有已选项目。之后上下文操作栏自动消失。</li>
					<li>通过导航栏的“返回”按钮关闭上下文操作栏，也可以通过点击上下文操作栏的选择图标关闭它。关闭上下文操作栏的同时要取消所有的选择。</li>
				</ul>
				<p>当您让用户长按来选择项目时，需要使用上下文操作栏。您可以控制上下文操作栏中的图标，使用户可以执行不同的操作。</p>
				<p>更多信息，请参考 <a href="selection.html">选择</a> 一节。</p>
				<div class="contentHeaderWraper">
					<h2>视图控制</h2>
				</div>
				<p>如果您的应用在不同的视图中显示内容，操作栏可以提供三种不同的控件让用户在不同的视图之间切换: 标签、弹出菜单和抽屉。</p>
				<h4>标签</h4>
				<p>“标签 (tabs)”显示了应用提供的不同视图，通过标签可以在它们之间导航。
				</p>
				<img class="nomarginRight" src="tabs_youtube.png" />
				<p><span class="highlight">在下面的情况中使用标签</span>:</p>
				<ul class="circleList">
					<li>用户需要经常在您的应用中切换标签。</li>
					<li>您希望用户能比较容易看到其它的视图选项。</li>
				</ul>
				<div>
					<div class="column col6">
						<h4>固定标签</h4>
						<p>固定标签始终将所有标签显示在屏幕上。当方向改变时可以将固定标签移到顶部栏中。</p>
						<p>使用固定标签可以使用户快速的在两三个标签之间切换。应当使用户可以通过左右滑动内容区域来切换标签。</p>
					</div>
					<div class="column col7 nomarginRight">
						<img class="nomarginLR" src="action_bar_pattern_default_tabs.png" />
						<p class="caption">深色和浅色 Holo 主题的固定标签。</p>
					</div>
					<div class="clear"></div>
				</div>
				<div>
					<div class="column col6">
						<h4>滚动标签</h4>
						<p>滚动标签占满整个顶部栏的空间，将当前的视图放在中间。可以在内容区域左右滑动显示滚动标签中的不同视图。</p>
						<p>如果您的应用有许多视图，或者视图的数目根据当前的数据而有变化 (例如消息应用中，可以在多个会话中导航)。滚动标签应当始终允许用户通过左右滑动切换视图，无论是在内容区域还是标签区域。</p>
					</div>
					<div class="column col7 nomarginRight">
						<video width="400" class="clickPlay" autoplay>
							<source src="http://developer.android.com/design/media/tabs_scrolly.mp4" type="video/mp4" />
							<source src="http://developer.android.com/design/media/tabs_scrolly.webm" type="video/webm" />
							<source src="http://developer.android.com/design/media/tabs_scrolly.ogv" type="video/ogg" />
						</video>
						<p class="caption">电子市场的滚动标签。</p>
						<p class="videoInstruction">点击重放视频。</p>
					</div>
					<div class="clear"></div>
				</div>
				<div>
					<div class="column col6">
						<h4>弹出菜单</h4>
						<p>弹出菜单允许用户切换视图。</p>
						<p><span class="highlight">使用弹出菜单而不是标签</span>:</p>
						<ul class="circleList">
							<li>您不希望在垂直方向浪费屏幕空间。</li>
							<li>您的用户不经常切换视图。</li>
						</ul>
					</div>
					<div class="column col7 nomarginRight">
						<img class="nomarginLR" src="action_bar_pattern_spinner.png" />
						<p class="caption">日历应用的弹出菜单。</p>
					</div>
					<div class="clear"></div>
				</div>
				<h4>抽屉</h4>
				<div>
					<div class="column col6">
						<p>抽屉是一个从侧边滑入滑出的菜单，用户通过抽屉切换您应用中的视图。通过触摸主操作栏上应用的图标 (配以“向上”箭头)。并且抽屉也应该可以通过在侧边滑入的动作打开，并通过在侧边滑出的动作关闭。但是因为抽屉是通过“向上”导航按钮开关的，所以应该只出现在应用的顶层视图中。</p>
						<p><span class="highlight">在主操作栏使用抽屉</span>:</p>
						<ul class="circleList">
							<li>您不希望标签栏占用高度的空间。</li>
							<li>您希望为几个之间不相互关联的视图提供应用内的导航能力。</li>
						</ul>
					</div>
					<div class="column col7 nomarginRight">
						<img class="nomarginRight" src="actionbar_drawer.png" />
					</div>
					<div class="clear"></div>
				</div>
				<div class="contentHeaderWraper">
					<h2>操作栏按钮</h2>
				</div>
				<p>操作栏按钮展示了您应用的重要功能。考虑一下哪些功能最常用，把它们放在操作栏上。由于屏幕尺寸的限制，系统会把一部分按钮移到更多操作菜单中，所以想好这些功能的排列顺序。</p>
				<img class="nomarginLR" src="action_bar_pattern_action_icons.png" />
				<p class="caption">一组操作栏按钮例子，来自 Gmail 应用。</p>
				<p>按照 FIT 标准来选择和展示操作栏按钮。</p>
				<div>
					<div class="column col4">
						<p><span class="highlight">F &mdash; 常用</span></p>
						<ul class="circleList">
							<li>人们进入该屏幕，70% 是为了使用该功能吗？</li>
							<li>人们经常连续使用这些功能吗？</li>
							<li>完成这些操作多花一些时间很烦人吗？</li>
						</ul>
					</div>
					<div class="column col4">
						<p><span class="highlight">I &mdash; 重要</span></p>
						<ul class="circleList">
							<li>这个功能超酷或者是您应用的卖点？</li>
							<li>这个功能操作起来困难吗？</li>
						</ul>
					</div>
					<div class="column col4 nomarginRight">
						<p><span class="highlight">T &mdash; 典型</span></p>
						<ul class="circleList">
							<li>在类似的应用中，这是不是最主要的功能？</li>
							<li>某些情况下，人们会不会对这个操作跑到更多功能菜单中而感到惊讶？</li>
						</ul>
					</div>
					<div class="clear"></div>
				</div>
				<p>如果符合 FIT 中的一条，它就可以进入操作栏，否则还是放在更多操作菜单里吧。</p>
				<p>内置的图标应当用来表示一些确定的通用操作，例如“刷新”和“分享”。下载链接提供了一个图标包，其中的图标可以缩放到多种屏幕分辨率，并且适合于浅色和深色的 Holo 主题。图标包中还有没有样式化的图标，可以和您自己的主题搭配，并且提供了 Adobe® Illustrator® 源文件，您可以自己修改。</p>
				<p><a href="https://dl-ssl.google.com/android/design/Android_Design_Icons_20120229.zip">下载操作栏图标包</a></p>
				<div>
					<div class="column col6">
						<h4>更多操作</h4>
						<p>“更多操作”为用户选择那些不常用的操作提供了一条途径。该按钮只会在没有“菜单”键的手机上显示，如果有硬件“菜单”键，用户需要按该按钮打开更多操作菜单。</p>
					</div>
					<div class="column col7 nomarginRight">
						<img class="nomarginLR" src="action_bar_pattern_overflow.png" />
						<p class="caption">更多操作总是在最右边。</p>
					</div>
					<div class="clear"></div>
				</div>
				<p>操作栏中能放的下多少图标呢？按下面的规则来吧:</p>
				<ul class="circleList">
					<li>操作栏的所有图标不能占用超过 50% 的宽度，底部操作栏则可以使用全部宽度来摆放图标。</li>
					<li>按 (<acronym title="Density-independent pixels. One dp is one pixel on a 160 dpi screen.">dp</acronym>) 为单位，不同的屏幕宽度在操作栏内能摆放的图标数量如下:
					<ul class="circleList">
						<li>小于 360 dp = 2 个图标</li>
						<li>360-499 dp = 3 个图标</li>
						<li>500-599 dp = 4 个图标</li>
						<li>600 dp 或更宽 = 5 个图标</li>
					</ul>
					</li>
				</ul>
				<img class="nomarginLR" src="action_bar_pattern_table.png" />
				<p class="caption">上面的表格中，“o”表示一个操作栏图标，“=”表示更多操作菜单按钮。</p>
				<h4>分享</h4>
				<p>如果您的应用可以分享图片或影片，那么在操作栏上放置一个分享按钮。该按钮会显示最近使用的分享服务，以达到快速分享。这个按钮应当出现在选择时的上下玩操作栏中，放在选择提示的旁边，点击后会弹出菜单，包括了分享的选项。</p>
				<img class="nomarginRight" src="action_bar_pattern_share_pack.png" />
				<p class="caption">相册应用提供了扩展的分享选项。</p>
				<div class="contentHeaderWraper">
					<h2>操作栏清单</h2>
				</div>
				<p>当设计操作栏时，考虑以下问题:</p>
				<h4>对于当前的任务，视图切换很重要吗？</h4>
				<p>如果视图切换对您的应用很重要，那么使用标签或者下拉菜单。</p>
				<h4>哪些操作应当一直出现在操作栏上，哪些可以放在更多操作菜单中？</h4>
				<p>按照 <acronym title="Frequent, Important or Typical">FIT</acronym> 原则，考虑哪些操作放在操作栏上，哪些放在更多操作菜单中。如果操作栏中的图标太多了，使用底部的副操作栏。</p>
				<h4>哪些内容足够重要需要一直显示？</h4>
				<p>有时一些上下文信息对于您的应用很重要。比如收件箱中未读信息数量或者正在播放的歌曲信息。仔细考虑操作栏的布局安排。</p>
			</div><!-- mainContent -->
			<div class="contentNav bottomNav">
				<div class="buttonWrapper">
					<a class="buttonPrev" href="navigation.html">上一页</a><a class="buttonNext" href="multi-pane-layouts.html">下一页</a>
				</div>
			</div>
		</div>
		<div class="clear"></div>
		<div id="footer">
			<p><a href="http://adchs.sourceforge.net">Android Design 安卓设计非官方简体中文版</a>&nbsp;-&nbsp;<a href="http://www.sunjw.us/adchs" target="_blank">www.sunjw.us/adchs</a>&nbsp;-&nbsp;感谢&nbsp;<a href="http://www.topfun.us" target="_blank">topfun 同学</a>&nbsp;<a href="http://www.freemindworld.com" target="_blank">Li Fanxi</a>&nbsp;<a href="http://www.apkbus.com" target="_blank">安卓巴士</a>&nbsp;提供的&nbsp;<a href="http://www.topfun.us/adchs/">镜像1</a>&nbsp;<a href="http://www.freemindworld.com/adchs">镜像2</a>&nbsp;<a href="http://www.apkbus.com/design">镜像3</a>。</p>
			<p id="copyright">没有特别说明的话，所有内容按照 <a href="http://creativecommons.org/licenses/by/2.5/" target="_blank">Creative Commons Attribution 2.5</a> 协议授权。<br />基于 <a href="http://developer.android.com/design/" target="_blank">Android Design</a> 翻译而成，部分图片和设计样式也来自于 <a href="http://developer.android.com/design/" target="_blank">Android Design</a>。Android 是 Google 的商标。</p>
			<p>2012-2013&nbsp;-&nbsp;<a href="http://www.sunjw.us/blog" target="_blank">Sun Junwen</a>&nbsp;-&nbsp;sunjw8888 at gmail.com&nbsp;-&nbsp;<a href="http://www.sunjw.us/jsminnpp/" target="_blank">JSMinNpp</a>&nbsp;-&nbsp;<a href="http://www.twitter.com/sunjw" target="_blank" title="Follow me on Twitter"><img src="../imgs/twitter-small.png" alt="Follow me on Twitter"/></a>&nbsp;<a href="http://www.facebook.com/profile.php?id=1444809914" target="_blank" title="Follow me on Facebook"><img src="../imgs/fb-small.png" alt="Follow me on Facebook"/></a>&nbsp;<a href="http://weibo.com/nusjw" target="_blank" title="Follow me on Weibo"><img src="../imgs/weibo-small.png" alt="Follow me on Weibo"/></a>&nbsp;<a href="http://www.renren.com/sunjwvista" target="_blank" title="Follow me on Renren"><img src="../imgs/renren-small.png" alt="Follow me on Renren"/></a>&nbsp;-&nbsp;<g:plusone size="small"></g:plusone></p>
		</div>
	</div>
</body>
</html>
